<template>
  <div class="personal">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="per-data">
      <van-cell-group>
        <van-cell
          title="头像"
          size="large"
          center
          :border="false"
          is-link
          @click="showHead"
        >
          <template #right-icon>
            <div class="per-img">
              <img class="img-auto" :src="personalData.userImg" alt="" />
              <div class="up-img">
                <van-uploader v-model="fileList" :after-read="setUserImg" multiple :max-count="1" />
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell title="用户id" :value="personalData.userId" />
        <van-cell
          title="昵称"
          is-link
          :value="personalData.nickName"
          @click="showPopup"
        />
        <van-cell title="性别" is-link :value="sex" @click="showSex" />
        <van-cell title="绑定手机" :value="`+86 ${personalData.phone}`" />
        <van-cell title="简介" size="large">
          <template #right-icon>
            <div class="text">这家伙很懒，什么都没有留下!</div>
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 修改昵称 -->
      <van-popup position="bottom" v-model="show">
        <van-field v-model="nickName" label="修改昵称" />
        <div style="margin: 16px">
          <van-button round block type="info" @click="setNickName"
            >提交</van-button
          >
        </div>
      </van-popup>

      <!-- 修改性别 -->
      <van-popup position="bottom" v-model="isSex">
        <van-picker
          title="修改性别"
          :visible-item-count="2"
          :default-index="2"
          item-height="50"
          show-toolbar
          :columns="columns"
          @confirm="setSex"
          @cancel="hideSex"
        />
      </van-popup>

      <!-- 修改头像 -->
      <!-- <van-popup position="bottom" round v-model="isHead">
        <label class="file-box">
          <h2>从手机相册中选取</h2>
          <van-uploader v-model="fileList" :after-read="setUserImg" multiple :max-count="1" style="display:none;" />
        </label>
      </van-popup> -->

      <!-- 推送通知 -->
      <van-cell
        title="推送通知"
        size="large"
        center
        is-link
        value="已开启"
        style="height: 73px; border-radius: 10px"
      />

      <!-- 退出登录 -->
      <div class="exit-btn">
        <van-button type="primary" round color="#307dd5" block @click="outLogin"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/personal.less";
export default {
  name: "Personal",
  data() {
    return {
      personalData: {},
      show: false,
      nickName: "",
      columns: ["男", "女"],
      isSex: false,
      sex: "男",
      isHead: false,
      fileList: [],
      userImg: ''
    };
  },

  created() {
    this.getPersonalData();
  },

  methods: {
    // 返回上一级
    back() {
      this.$router.back();
    },

    // 显示修改昵称输入框
    showPopup() {
      this.show = true;
    },

    // 显示修改性别
    showSex() {
      this.isSex = true;
    },
    // 隐藏修改性别
    hideSex() {
      this.isSex = false;
    },

    // 显示修改头像栏
    showHead() {
      this.isHead = true;
    },

    // 修改性别
    setSex(v) {
      this.sex = v;
      this.isSex = false;
    },

    // 获取个人资料
    getPersonalData() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "GET",
        url: this.baseURL + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.date.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "B001") {
            this.personalData = response.data.result[0];
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 修改昵称
    setNickName() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      if (this.nickName == "") {
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/updateNickName",
        data: {
          appkey: this.appkey,
          tokenString,
          nickName: this.nickName,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "C001") {
            if (this.iptValue !== "") {
              this.getPersonalData();
              this.show = false;
            }
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 修改头像
    setUserImg() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      // console.log(this.fileList);
      let base = this.fileList[0].content.split(',');
      let type = this.fileList[0].file.type.split('/');

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type[1],
          serverBase64Img: base[1]
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "H001") {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
            });
            this.personalData.userImg = response.data.userImg;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 退出登录
    outLogin() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/logout",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "F001") {
            this.$router.push({name: 'Login'});
          }
          this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 2000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    }
  },
};
</script>
